<template>
  <view class="detail-container">
    <!-- 顶部Tab导航 -->
    <view class="tab-nav" :style="{ paddingTop: (statusBarHeight-20) + 'px' }">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'detail' }" 
        @tap="switchTab('detail')"
      >
        公告详情
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'jobs' }" 
        @tap="switchTab('jobs')"
      >
        岗位列表
      </view>
    </view>
    
    <!-- 公告详情内容 -->
    <scroll-view 
      v-if="activeTab === 'detail'"
      scroll-y 
      class="detail-content" 
      :style="{ paddingTop: (statusBarHeight+40) + 'px', paddingBottom: '120rpx' }"
    >
      <block v-if="noticeDetail">
        <view class="detail-header">
          <view class="detail-title">{{ noticeDetail.title }}</view>
          <view class="detail-meta">
            <view class="meta-item">
              <text class="meta-label">报名时间：</text>
              <text class="meta-value">{{ noticeDetail.startTime && noticeDetail.endTime ? 
                formatDate(noticeDetail.startTime) + ' 至 ' + formatDate(noticeDetail.endTime) : 
                '暂无' }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-label">招聘人数：</text>
              <text class="meta-value">{{ noticeDetail.recruitNum || '--' }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-label">公司类型：</text>
              <text class="meta-value">{{ getCompanyTypeText(noticeDetail.companyType) }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-label">是否带编：</text>
              <text class="meta-value">{{ noticeDetail.isWeave ? '是' : '否' }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-label">状态：</text>
              <text class="meta-value" :class="[getStatusClass(noticeDetail.applyStatus)]">{{ getStatusText(noticeDetail.applyStatus) }}</text>
            </view>
            <view class="meta-item" v-if="noticeDetail.address">
              <text class="meta-label">地址：</text>
              <text class="meta-value">{{ noticeDetail.address }}</text>
            </view>
            <!-- 如果有原文链接，显示在地址下方 -->
            <view class="meta-item" v-if="noticeDetail.contentUrl">
              <text class="meta-label">原文链接：</text>
              <text class="meta-value link-text" @tap="copyOriginalLink">点击复制链接</text>
            </view>
          </view>
        </view>
        
        <!-- 如果有内容，显示内容 -->
        <view class="detail-content-section" v-if="noticeDetail.content">
          <view class="content-title">公告内容</view>
          <view class="content-body">
            <rich-text :nodes="noticeDetail.processedContent"></rich-text>
          </view>
        </view>
        
        <!-- 附件列表 -->
        <view class="detail-content-section" v-if="attachments && attachments.length > 0">
          <view class="content-title">附件列表</view>
          <view class="attachment-list">
            <view 
              v-for="(attachment, index) in attachments" 
              :key="index"
              class="attachment-item"
              @tap="downloadAttachment(attachment.url)"
            >
              <text class="attachment-icon iconfont icon-attachment"></text>
              <text class="attachment-name">{{attachment.name}}</text>
            </view>
          </view>
        </view>
        
        <!-- 底部占位，确保内容不被底部按钮遮挡 -->
        <view class="bottom-placeholder"></view>
      </block>
      
      <!-- 加载中 -->
      <view class="loading-state" v-if="isLoading">
        <text>加载中...</text>
      </view>
      
      <!-- 加载失败 -->
      <view class="error-state" v-if="loadError && !isLoading">
        <text>{{ loadError }}</text>
        <button class="retry-btn" @tap="fetchNoticeDetail">重试</button>
      </view>
    </scroll-view>
    
    <!-- 岗位列表内容 -->
    <view 
      v-if="activeTab === 'jobs'" 
      class="jobs-content" 
      :style="{ paddingTop: (statusBarHeight+40) + 'px' }"
    >
      <!-- 岗位列表 -->
      <view class="job-list-container">
        <!-- 搜索区域 -->
        <view class="search-area">
          <view class="search-row">
            <view class="search-box">
              <text class="iconfont icon-search search-icon"></text>
              <input 
                type="text" 
                class="search-input" 
                placeholder="请输入岗位名称"  
                confirm-type="search"
                v-model="jobQueryCondition.jobName"
                @confirm="handleJobSearch"
              />
              <text class="iconfont icon-close clear-icon" v-if="jobQueryCondition.jobName" @tap="clearJobSearch"></text>
            </view>
            <view class="search-btn" @tap="handleJobSearch">搜索</view>
          </view>
        </view>
        
        <!-- 可滚动区域：岗位列表 -->
        <scroll-view 
          scroll-y 
          class="job-list" 
          @scrolltolower="loadMoreJobs"
          refresher-enabled
          :refresher-triggered="isJobRefreshing"
          @refresherrefresh="onJobRefresh"
        >
          <view class="job-card" v-for="(item, index) in jobList" :key="index" @tap="goToJobDetail(item)">
            <view class="job-header">
              <view class="job-title">{{item.jobName}}</view>
              <view class="job-salary">{{item.salary || '面议'}}</view>
            </view>
            <view class="job-company">{{item.companyName}}</view>
            <view class="job-info">
              <text class="job-tag">{{getCompanyTypeText(item.companyType)}}</text>
              <text class="job-tag degree-tag">{{getDegreeText(item.degree)}}</text>
              <text class="job-tag" v-if="item.type !== undefined && item.type !== ''">{{getTypeText(item.type)}}</text>
              <text class="job-tag" v-if="item.isWeave !== undefined && item.isWeave !== ''">{{getYesNoText(item.isWeave) === '是' ? '带编' : '不带编'}}</text>
              <text class="job-tag job-address-tag" v-if="item.jobAddress">
                <text class="job-address-icon iconfont icon-location"></text>
                {{item.jobAddress}}
              </text>
            </view>
            <view class="job-status">
              <view class="job-application-time" v-if="item.startDate || item.endDate">
                <text class="job-time-label">报名时间：</text>
                <text class="job-time-value">{{ item.startDate && item.endDate ? `${item.startDate} ~ ${item.endDate}` : (item.endDate || '暂无') }}</text>
              </view>
              <text :class="['status-tag', getStatusClass(item.status)]">{{getStatusText(item.status)}}</text>
            </view>
          </view>
          
          <!-- 加载更多提示 -->
          <view class="loading-more" v-if="jobList.length > 0">
            <text v-if="isJobLoading">加载中...</text>
            <text v-else-if="!hasMoreJobs">没有更多数据了</text>
          </view>
          
          <!-- 空状态提示 -->
          <view class="empty-state" v-if="jobList.length === 0 && !isJobLoading">
            <text class="empty-text">暂无相关职位</text>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 固定在底部的关注/取消关注按钮 -->
    <view class="fixed-action-buttons" v-if="noticeDetail && activeTab === 'detail'">
      <button 
        v-if="noticeDetail.isLike === 0" 
        class="follow-btn" 
        @tap="likeNotice"
      >
        <text class="iconfont icon-star"></text>
        关注公告
      </button>
      <button 
        v-else-if="noticeDetail.isLike === 1" 
        class="unfollow-btn" 
        @tap="cancelLike"
      >
        <text class="iconfont icon-star-filled"></text>
        取消关注
      </button>
    </view>
  </view>
</template>

<script>
import { getRecruitNoticeDetail, addLikeNotice, cancelLikeNotice } from '@/api/notice/recruitNotice'
import { getRecruitJob } from '@/api/job/recruitJob.js'
import { getDicts } from '@/api/dict/data.js'

export default {
  data() {
    return {
      activeTab: 'detail', // 当前激活的标签页，默认为公告详情
      statusBarHeight: 0,
      noticeId: '',
      noticeDetail: null,
      processedContent: '',
      attachments: [], // 附件列表
      isLoading: false,
      loadError: '',
      // 公司类型字典名称
      companyTypeDictType: 'recruit_company_type',
      // 公司类型字典
      companyTypeDict: [],
      // 报名状态字典名称
      applyStatusDictType: 'recruit_notice_status',
      // 报名状态字典
      applyStatusDict: [],
      // 学历要求字典名称
      degreeTypeDictType: 'recruit_degree',
      // 学历要求字典
      degreeTypeDict: [],
      // 招聘类型字典名称
      typeDictType: 'recruit_type',
      // 招聘类型字典
      typeDict: [],
      // 招聘是否字典名称
      yesOrNoDictType: 'recruit_yes_no',
      // 招聘是否字典
      yesOrNoDict: [],
      
      // 岗位列表相关数据
      jobList: [],
      jobPageNum: 1,
      jobPageSize: 10,
      jobTotal: 0,
      isJobLoading: false,
      isJobRefreshing: false,
      hasMoreJobs: true,
      jobQueryCondition: {
        jobName: '',
        noticeId: '' // 公告 ID参数
      }
    }
  },
  onLoad(options) {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    
    // 加载字典数据
    this.loadDictData();
    
    // 获取公告ID
    if (options.noticeId) {
      this.noticeId = options.noticeId;
      this.jobQueryCondition.noticeId = options.noticeId; // 设置岗位查询条件中的公告ID
      this.fetchNoticeDetail();
    } else {
      this.loadError = '参数错误，未找到公告ID';
    }
  },
  methods: {
    // 获取公告详情
    async fetchNoticeDetail() {
      if (this.isLoading) return;
      
      this.isLoading = true;
      this.loadError = '';
      
      try {
        const res = await getRecruitNoticeDetail(this.noticeId);
        
        if (res.code === 200) {
          this.noticeDetail = res.data;
          // 处理公告内容中的图片，使其自适应屏幕宽度，并提取附件
          if (this.noticeDetail.content) {
            // 处理内容并提取附件
            this.noticeDetail.processedContent = this.processContentImages(this.noticeDetail.content);
          }
        } else {
          this.loadError = res.msg || '加载数据失败';
        }
      } catch (error) {
        console.error('加载数据失败', error);
        this.loadError = '网络异常，请稍后重试';
      } finally {
        this.isLoading = false;
      }
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 复制原文链接
    copyOriginalLink() {
      if (!this.noticeDetail?.contentUrl) return;
      
      uni.setClipboardData({
        data: this.noticeDetail.contentUrl,
        success: () => {
          uni.showToast({
            title: '链接已复制到剪贴板',
            icon: 'none'
          });
        }
      });
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '暂无';
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    
    // 获取状态文本
    getStatusText(value) {
      if (!value && value !== 0) return '未知状态';
      const dictValue = String(value);
      const dictItem = this.applyStatusDict.find(item => item.dictValue === dictValue);
      return dictItem ? dictItem.dictLabel : '未知状态';
    },
    
    // 获取状态样式类
    getStatusClass(value) {
      const classMap = {
        1: 'status-upcoming',    // 即将报名
        2: 'status-ongoing',     // 正在报名
        3: 'status-ending',      // 即将截止
        4: 'status-ended'        // 结束报名
      }
      return classMap[value] || ''
    },
    
    // 获取公司类型文本
    getCompanyTypeText(value) {
      if (!value && value !== 0) return '未知';
      const dictValue = String(value);
      const dictItem = this.companyTypeDict.find(item => item.dictValue === dictValue);
      return dictItem ? dictItem.dictLabel : '未知';
    },
    
    // 加载字典数据
    async loadDictData() {
      try {
        // 并行加载所有字典数据
        const [companyTypeRes, applyStatusRes, degreeTypeRes, typeRes, yesOrNoRes] = await Promise.all([
          getDicts(this.companyTypeDictType),
          getDicts(this.applyStatusDictType),
          getDicts(this.degreeTypeDictType),
          getDicts(this.typeDictType),
          getDicts(this.yesOrNoDictType)
        ]);
        
        // 设置字典数据
        if (companyTypeRes.code === 200) {
          this.companyTypeDict = companyTypeRes.data;
        }
        
        if (applyStatusRes.code === 200) {
          this.applyStatusDict = applyStatusRes.data;
        }
        
        if (degreeTypeRes.code === 200) {
          this.degreeTypeDict = degreeTypeRes.data;
        }
        
        if (typeRes.code === 200) {
          this.typeDict = typeRes.data;
        }
        
        if (yesOrNoRes.code === 200) {
          this.yesOrNoDict = yesOrNoRes.data;
        }
      } catch (error) {
        console.error('加载字典数据失败', error);
      }
    },

    // 关注公告
    async likeNotice() {
      const res = await addLikeNotice(this.noticeId);
      if (res.code === 200) {
        uni.showToast({
          title: '已关注',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: res.msg || '关注失败',
          icon: 'none'
        });
      }
      this.fetchNoticeDetail();
    },
    
    // 取消关注公告
    async cancelLike() {
      const res = await cancelLikeNotice(this.noticeId);
      if (res.code === 200) {
        uni.showToast({
          title: '已取消关注',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: res.msg || '取消关注失败',
          icon: 'none'
        });
      }
      this.fetchNoticeDetail();
    },
    
    // 处理内容中的图片和提取附件链接
    processContentImages(htmlContent) {
      if (!htmlContent) return htmlContent;
      
      // 清空附件列表
      this.attachments = [];
      
      // 获取屏幕宽度
      const systemInfo = uni.getSystemInfoSync();
      const screenWidth = systemInfo.windowWidth;
      // 考虑内容区域的padding
      const contentWidth = screenWidth - 40; // 左右各20px的padding
      
      // 处理后的HTML内容
      let processedContent = htmlContent
        // 替换所有img标签，添加样式使其自适应宽度
        .replace(/<img/gi, `<img style="max-width:${contentWidth}px;width:100%;height:auto;display:block;margin:10px auto;"`) 
        // 移除可能导致图片溢出的宽高属性
        .replace(/(<img[^>]*)(width|height)=[\'\"\s]*[0-9]+[\'\"\s]*/gi, '$1');
      
      // 提取附件链接
      const attachmentRegex = /<a\s+([^>]*href=["']([^"']+)["'][^>]*)>([^<]+)<\/a>/gi;
      let match;
      
      // 定义一个数组来存储所有需要替换的附件链接
      const replacements = [];
      
      while ((match = attachmentRegex.exec(htmlContent)) !== null) {
        const [fullMatch, attrs, url, text] = match;
        
        // 判断是否是附件链接 (通常包含.doc, .pdf, .xls等后缀)
        const isAttachment = /\.(doc|docx|pdf|xls|xlsx|ppt|pptx|zip|rar|txt)$/i.test(url);
        
        if (isAttachment) {
          // 将附件添加到附件列表
          this.attachments.push({
            name: text.trim(),
            url: url,
            type: url.split('.').pop().toLowerCase()
          });
          
          // 将附件链接替换为普通文本
          replacements.push({
            match: fullMatch,
            replacement: `<span style="color:#666;">${text}</span>`
          });
        }
      }
      
      // 应用替换
      replacements.forEach(({ match, replacement }) => {
        processedContent = processedContent.replace(match, replacement);
      });
      
      return processedContent;
    },
    
    // 此方法已不再需要，由附件列表的点击事件直接调用downloadAttachment
    
    // 下载附件
    downloadAttachment(url) {
      uni.showLoading({
        title: '正在下载附件...'
      });
      
      // 下载文件
      uni.downloadFile({
        url: url,
        success: (res) => {
          if (res.statusCode === 200) {
            // 获取文件名
            const fileName = url.substring(url.lastIndexOf('/') + 1);
            
            // 打开文件
            uni.openDocument({
              filePath: res.tempFilePath,
              showMenu: true,
              success: () => {
                uni.hideLoading();
                uni.showToast({
                  title: '附件打开成功',
                  icon: 'success'
                });
              },
              fail: (err) => {
                console.error('打开文件失败', err);
                uni.hideLoading();
                uni.showToast({
                  title: '无法打开该类型文件',
                  icon: 'none'
                });
                
                // 尝试保存到本地
                this.saveAttachmentToLocal(res.tempFilePath, fileName);
              }
            });
          } else {
            uni.hideLoading();
            uni.showToast({
              title: '下载失败，请重试',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('下载文件失败', err);
          uni.hideLoading();
          uni.showToast({
            title: '下载失败，请检查网络',
            icon: 'none'
          });
        }
      });
    },
    
    // 保存附件到本地
    saveAttachmentToLocal(tempFilePath, fileName) {
      // 在不同平台使用不同的保存方法
      // #ifdef APP-PLUS
      plus.io.resolveLocalFileSystemURL(tempFilePath, (entry) => {
        entry.file((file) => {
          const reader = new plus.io.FileReader();
          reader.onloadend = (e) => {
            const blob = new Blob([e.target.result]);
            const url = URL.createObjectURL(blob);
            // 创建下载链接
            const link = document.createElement('a');
            link.href = url;
            link.download = fileName;
            link.click();
            URL.revokeObjectURL(url);
          };
          reader.readAsArrayBuffer(file);
        });
      });
      // #endif
      
      // #ifdef H5
      const link = document.createElement('a');
      link.href = tempFilePath;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      // #endif
      
      // #ifdef MP
      uni.saveFile({
        tempFilePath: tempFilePath,
        success: (res) => {
          uni.showToast({
            title: '附件已保存到本地',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          });
        }
      });
      // #endif
    },
    
    // 切换标签页
    switchTab(tabName) {
      if (this.activeTab === tabName) return;
      
      this.activeTab = tabName;
      
      // 如果切换到岗位列表标签页，加载岗位数据
      if (tabName === 'jobs' && this.jobList.length === 0) {
        this.fetchJobList(true);
      }
    },
    
    // 获取岗位列表
    async fetchJobList(isRefresh = false) {
      if (this.isJobLoading) return;
      
      this.isJobLoading = true;
      
      if (isRefresh) {
        this.jobPageNum = 1;
        this.jobList = [];
        this.hasMoreJobs = true;
      }
      
      try {
        // 构建请求参数
        const params = {
          ...this.jobQueryCondition,
          pageNum: this.jobPageNum,
          pageSize: this.jobPageSize
        };
        
        // 调用后端API
        const res = await getRecruitJob(params);
        
        if (res.code === 200) {
          const { rows, total } = res;
          
          if (isRefresh) {
            this.jobList = rows;
          } else {
            this.jobList = [...this.jobList, ...rows];
          }
          
          this.jobTotal = total;
          // 判断是否还有更多数据
          this.hasMoreJobs = this.jobList.length < total;
          
          // 如果当前页数据为空，显示空状态
          if (this.jobList.length === 0) {
            this.hasMoreJobs = false;
          }
        } else {
          uni.showToast({
            title: res.msg || '获取数据失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载岗位数据失败', error);
        uni.showToast({
          title: '网络异常，请稍后重试',
          icon: 'none'
        });
      } finally {
        this.isJobLoading = false;
        this.isJobRefreshing = false;
      }
    },
    
    // 下拉刷新岗位列表
    onJobRefresh() {
      this.isJobRefreshing = true;
      this.fetchJobList(true);
    },
    
    // 加载更多岗位
    loadMoreJobs() {
      if (!this.hasMoreJobs || this.isJobLoading) return;
      
      this.jobPageNum++;
      this.fetchJobList();
    },
    
    // 清除岗位搜索
    clearJobSearch() {
      this.jobQueryCondition.jobName = '';
      this.handleJobSearch();
    },
    
    // 处理岗位搜索
    handleJobSearch() {
      this.jobPageNum = 1;
      this.jobList = [];
      this.hasMoreJobs = true;
      this.fetchJobList(true);
    },
    
    // 跳转到岗位详情页
    goToJobDetail(item) {
      uni.navigateTo({
        url: `/pages/job/detail?jobId=${item.jobId}`
      });
    },
    
    // 获取学历文本
    getDegreeText(value) {
      if (!value && value !== 0) return '不限';
      const dictValue = String(value);
      const dictItem = this.degreeTypeDict.find(item => item.dictValue === dictValue);
      return dictItem ? dictItem.dictLabel : '不限';
    },
    
    // 获取招聘类型文本
    getTypeText(value) {
      if (!value && value !== 0) return '未知';
      const dictValue = String(value);
      const dictItem = this.typeDict.find(item => item.dictValue === dictValue);
      return dictItem ? dictItem.dictLabel : '未知';
    },
    
    // 获取是否带编文本
    getYesNoText(value) {
      if (!value && value !== 0) return '未知';
      const dictValue = String(value);
      const dictItem = this.yesOrNoDict.find(item => item.dictValue === dictValue);
      return dictItem ? dictItem.dictLabel : value == 1 ? '是' : value == 0 ? '否' : '未知';
    }
  }
}
</script>

<style>
.detail-container {
  min-height: 100vh;
  background: #f5f7fa;
  position: relative;
}

/* Tab导航样式 */
.tab-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #fff;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #409EFF;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 3px;
  background: #409EFF;
  border-radius: 3px;
}

/* 导航栏 */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.back-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-arrow-left {
  font-size: 20px;
  color: #333;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-right: 44px; /* 为了让标题居中 */
}

/* 内容区域 */
.detail-content {
  height: 100vh;
  box-sizing: border-box;
}

.detail-header {
  background: #fff;
  padding: 20px;
  margin-bottom: 10px;
}

.detail-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meta-item {
  display: flex;
  font-size: 14px;
  line-height: 1.5;
}

.meta-label {
  color: #666;
  width: 80px;
}

.meta-value {
  color: #333;
  flex: 1;
}

.link-text {
  color: #409EFF;
  text-decoration: underline;
}

/* 内容区域 */
.detail-content-section {
  background: #fff;
  padding: 20px;
  margin-bottom: 10px;
}

.content-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
}

.content-body {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* 富文本内容中的图片样式 */
.content-body img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 10px auto;
}

/* 附件列表样式 */
.attachment-list {
  padding: 10rpx 0;
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.attachment-item:last-child {
  border-bottom: none;
}

.attachment-icon {
  font-size: 36rpx;
  color: #409EFF;
  margin-right: 20rpx;
}

.attachment-name {
  color: #409EFF;
  text-decoration: underline;
  flex: 1;
  font-size: 28rpx;
  word-break: break-all;
}

/* 状态样式 */
.status-upcoming {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-weight: normal;
}

.status-ongoing {
  color: #67C23A;
  background-color: rgba(103, 194, 58, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-weight: normal;
}

.status-ending {
  color: #E6A23C;
  background-color: rgba(230, 162, 60, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-weight: normal;
}

.status-ended {
  color: #F56C6C;
  background-color: rgba(245, 108, 108, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-weight: normal;
}

/* 加载状态 */
.loading-state,
.error-state {
  padding: 40px 0;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.retry-btn {
  margin-top: 15px;
  background: #409EFF;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  padding: 6px 15px;
  display: inline-block;
}

/* 关注/取消关注按钮样式 */
.fixed-action-buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 40rpx;
  display: flex;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.follow-btn, .unfollow-btn {
  width: 100%;
  height: 90rpx;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.follow-btn {
  background: linear-gradient(135deg, #42a5f5, #1976d2);
  color: #fff;
}

.unfollow-btn {
  background: #f5f5f5;
  color: #666;
  border: 1rpx solid #ddd;
}

.follow-btn .iconfont, .unfollow-btn .iconfont {
  margin-right: 8rpx;
  font-size: 36rpx;
}

/* 底部占位区域 */
.bottom-placeholder {
  height: 120rpx;
  width: 100%;
}

/* 岗位列表样式 */
.jobs-content {
  height: 100vh;
  box-sizing: border-box;
}

.job-list-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 搜索区域样式 */
.search-area {
  background-color: #fff;
  padding: 16rpx 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  width: 100%;
}

.search-row {
  display: flex;
  align-items: center;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  height: 68rpx;
  border-radius: 8rpx;
  padding: 0 16rpx;
  margin-right: 14rpx;
  box-sizing: border-box;
}

.search-icon {
  font-size: 26rpx;
  color: #999;
  margin-right: 8rpx;
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  color: #333;
}

.clear-icon {
  font-size: 24rpx;
  color: #999;
  padding: 8rpx;
}

.search-btn {
  width: 100rpx;
  height: 68rpx;
  background-color: #409EFF;
  color: #fff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
}

/* 岗位列表样式 */
.job-list {
  flex: 1;
  height: calc(100vh - 180rpx);
  padding: 20rpx;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.job-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.job-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12rpx;
  align-items: center;
}

.job-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.job-salary {
  font-size: 30rpx;
  color: #ff7043;
  font-weight: bold;
}

.job-company {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.job-info {
  display: flex;
  flex-wrap: wrap;
}

.job-tag {
  background: #f0f2f5;
  color: #666;
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 6rpx;
  margin-right: 16rpx;
  margin-bottom: 8rpx;
}

.degree-tag {
  background: #e3f2fd;
  color: #1976d2;
}

.job-address-tag {
  display: flex;
  align-items: center;
  background: #f0f2f5;
  color: #666;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-status {
  margin-top: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16rpx;
  border-top: 1rpx solid #f5f5f5;
}

.job-application-time {
  font-size: 24rpx;
  color: #666;
  display: flex;
  align-items: center;
}

.job-time-label {
  color: #999;
  margin-right: 4rpx;
}

.job-time-value {
  color: #333;
}

/* 加载更多提示 */
.loading-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 24rpx;
}

/* 空状态提示 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>